<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input placeholder="客户名称" v-model="params.customer_name"></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          clearable
          v-model="params['gua_type.eq']"
          @change="getData()"
          :options="enumGuaType"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <c-select
          clearable
          v-model="params['channel_type.eq']"
          @change="getData()"
          :options="{
            1: '便捷（增量）',
            0: '常规（存量）',
          }"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border class="table-sm" v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:type="scope">
        <div>{{ enumGuaType[scope.row.gua_type] || '' }}</div>
        <div v-if="scope.row.gua_type">
          <small v-if="+scope.row.gua_type === 4">
            {{ +scope.row.channel_type === 0 ? '常规' : '便捷' }}
          </small>
          <small v-else>{{ +scope.row.channel_type === 0 ? '存量' : '增量' }}</small>
        </div>
      </template>
      <template v-slot:des="scope">
        <div v-html="formatLine(scope.row.confuse_des)"></div>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { formatLine } from '@/common/plugins/tools/format'
export default {
  components: {},
  data() {
    return {
      formatLine,
      enumGuaType: {
        4: '省联担',
        2: '直担',
        3: '限率',
      },
      loading: false,
      tableData: [],
      totalCount: 0,
      tableColumns: [
        { attrs: { label: '机构名称', prop: 'service_name' } },
        { attrs: { label: '业务类型', prop: 'gua_type', align: 'center' }, slot: 'type' },
        { attrs: { label: '处理人', prop: 'submit_person_name', align: 'center' } },
        { attrs: { label: '客户名称', prop: 'customer_name', align: 'center' } },
        { attrs: { label: '创建时间', prop: 'create_time', align: 'center' } },
        { attrs: { label: '申请金额(万元)', prop: 'apply_funds', align: 'center' } },
        { attrs: { label: '拒绝人', prop: 'confuse_person', align: 'center' } },
        { attrs: { label: '拒绝时间', prop: 'confuse_time', width: 90 } },
        { attrs: { label: '拒绝理由', prop: 'confuse_des', width: 200 }, slot: 'des' },
      ],
      params: {
        index: 1,
        size: 15,
        create_time: '',
        'confuse_status.eq': 3,
      },
      serviceName: '',
    }
  },

  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      this.$api
        .getData('credit', 'customer_related', this.params, { confuse_time: 'desc' })
        .then(res => {
          this.tableData = res?.data?.data || []
          this.totalCount = res?.data?.totalCount || 0
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>
<style lang="scss" scoped></style>
